<%--
  Created by IntelliJ IDEA.
  User: xiaomi
  Date: 2025/2/10
  Time: 9:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>首页</title>
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }

        table,
        th,
        td {
            border: 2px solid  rgb(165, 184, 213);
        }
        th,
        td {
            text-align: center;
            padding: 8px;
        }
        th{
            background:  rgb(165, 184, 213);
            color: white;
        }
        /* 固定课程内容列的宽度，并允许自动换行 */
        th:nth-child(7),
        td:nth-child(7) {
            max-width: 400px; /* 最大宽度 */
            word-wrap: break-word; /* 允许长单词换行 */
            overflow-wrap: break-word; /* 防止内容溢出 */
            white-space: normal; /* 允许换行（覆盖默认的 nowrap） */
        }
        button {
            padding: 5px 10px;
            margin: 5px;
            border: none;
            border-radius: 3px;
            background-color:  rgb(165, 184, 213);
            color: white;
            cursor: pointer;
        }

        button:hover {
            background-color: rgb(125, 166, 217);
        }

        input[type = "checkbox"] {
            margin-right: 5px;
        }
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgb(0,0,0);
            background-color: rgba(0,0,0,0.4);
            padding-top: 60px;
        }

        .modal-content {
            background-color: #fefefe;
            margin: 5% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
<table id="courseTable">
    <tr>
        <th>课程图片</th>
        <th>课程</th>
        <th>课程类型</th>
        <th>价格</th>
        <th>已售</th>
        <th>时间</th>
        <th>课程内容</th>
        <th>操作</th>
    </tr>
</table>
<script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script>
<script>
    $(document).ready(function () {
        var state1 = sessionStorage.getItem('username');
        var del = "0";
        var s = "1";
        var user ={
            teachername: state1,
            del: del,
            state: s
        };
        // 使用AJAX获取课程信息
        $.ajax({
            url: './teacher/searchList',
            type: 'POST',
            data: JSON.stringify(user),
            contentType: 'application/json',
            success: function (data) {
                var table = $('#courseTable');
                data.forEach(function (course) {
                    var row = $('<tr></tr>');
                    var imgCell = $('<td></td>');
                    var img = $('<img>', {
                        src: course.picture,
                        alt: '课程图片',
                        width: '100'
                    });
                    imgCell.append(img);
                    row.append(imgCell);

                    row.append($('<td></td>').text(course.classname));
                    row.append($('<td></td>').text(course.classtype));
                    row.append($('<td></td>').text(course.money));
                    row.append($('<td></td>').text(course.soild));
                    row.append($('<td></td>').text(course.time));
                    row.append($('<td></td>').text(course.context));
                    var buttonCell = $('<td></td>');
                    var searchButton = $('<button>', {
                        text: '查看名单',
                        class: 'searchButton',
                        id: 'searchButton',
                        'data-course-id': course.id
                    });
                    buttonCell.append(searchButton);
                    row.append(buttonCell);
                    table.append(row);
                });
            },
            error: function () {
                alert('获取课程信息失败');
            }
        });
        $(document).on('click','#searchButton',function () {
            var classid = $(this).attr('data-course-id');
            var url1 = './Userlist/findById/'+classid;
            $.ajax({
                url: url1,
                type: 'GET',
                success: function (users) {
                    // 创建模态框
                    var modal = $('<div>', { class: 'modal' });
                    var modalContent = $('<div>', { class: 'modal-content' });
                    var closeButton = $('<span>', { class: 'close', text: '×' });

                    // 添加关闭按钮
                    modalContent.append(closeButton);

                    // 创建用户名单表格
                    var table = $('<table>');
                    var headerRow = $('<tr>').append($('<th>').text('用户ID'), $('<th>').text('用户名'), $('<th>').text('购买时间'));
                    table.append(headerRow);
                    var classname = "";
                    var time = "";
                    // 添加用户数据
                    users.forEach(function(user) {
                        var row = $('<tr>')
                            .append($('<td>').text(user.username))
                            .append($('<td>').text(user.name))
                            .append($('<td>').text(user.paytime));
                        table.append(row);
                        classname = user.classname;
                        time = user.time;
                    });

                    // 将表格添加到模态框内容中
                    modalContent.append(table);
                    var exportButton = $('<button>', {
                        text: '导出名单',
                        class: 'exportButton',
                        'data-class-name': classname, // 示例课程名称，实际应从后端获取
                        'data-class-time': time, // 示例课程时间，实际应从后端获取
                        'data-users': JSON.stringify(users)
                    });
                    modalContent.append(exportButton);
                    // 将模态框内容添加到模态框中
                    modal.append(modalContent);

                    // 将模态框添加到页面中
                    $('body').append(modal);

                    // 显示模态框
                    modal.css('display', 'block');

                    // 绑定关闭按钮点击事件
                    closeButton.on('click', function() {
                        modal.remove(); // 关闭模态框
                    });
                    exportButton.on('click', function () {
                        var className = $(this).attr('data-class-name');
                        var classTime = $(this).attr('data-class-time');
                        var users = JSON.parse($(this).attr('data-users'));

                        // 构造导出数据
                        var ws_data = [
                            ['课程名称', className],
                            ['课程时间', classTime],
                            ['用户ID', '用户名', '购买时间']
                        ];
                        users.forEach(function (user) {
                            ws_data.push([user.username, user.name, user.paytime]);
                        });

                        // 使用 SheetJS 创建工作表
                        var ws = XLSX.utils.aoa_to_sheet(ws_data);
                        var wb = XLSX.utils.book_new();
                        XLSX.utils.book_append_sheet(wb, ws, '名单');

                        // 触发下载
                        XLSX.writeFile(wb, '课程名单.xlsx');
                    });
                },
                error: function () {
                    alert('删除课程失败');
                }
            })
        });
    });
</script>
</body>
</html>